<template>


	<div class="leftSide hidden-xs-only" ref="sideMenu">

		<div class="menu_top">
			<el-scrollbar>
			<el-menu class="sidebar-el-menu" :default-active="toIndex()" :collapse="isCollapse" router>
				<span v-for="item in myItems">
					<!-- 二级菜单 -->
					<el-menu-item :index="item.index" :key="item.index" v-if="item.nextItems === undefined">
						<i :class="item.icon"></i>
						<template #title>{{ item.title }}</template>
					</el-menu-item>

					<!-- 三级菜单 -->
					<el-sub-menu :index="item.index" v-else>
						<template #title>
							<i :class="item.icon"></i>
							<span v-show="!isCollapse">{{ item.title }}</span>
						</template>

						<el-menu-item-group>
							<el-menu-item v-for="itemsTwo in item.nextItems" :index="itemsTwo.index">
								{{itemsTwo.title}}
							</el-menu-item>
						</el-menu-item-group>
					</el-sub-menu>
				</span>
			</el-menu>
			</el-scrollbar>
		</div>



		<div class="menu_bottom">
			<el-menu active-text-color="#5a6a6b" class="sidebar-el-menu" :collapse="isCollapse" @select="collapse">
				<el-menu-item index="0" class="bottom-fold">
					<i class="el-icon-s-fold" v-show="!isCollapse"></i>
					<i class="el-icon-s-unfold" v-show="isCollapse"></i>
					{{isCollapse?'':'收起'}}
				</el-menu-item>
			</el-menu>
		</div>

	</div>
</template>

<script>
	export default {
		props: ['items'],
		data() {
			return {
				isCollapse: false,
				myItems: this.items,
			}
		},
		methods: {
			//折叠导航栏
			collapse(key, keyPath) {
				if (key === '0') {
					this.isCollapse = !this.isCollapse;
				}
			},
			toIndex() {
				// console.log(this.$route.path);
				return this.$route.path.split('/')[2];
			}
		},
		watch: {
			items: function(val) {
				this.myItems = val
			},
			myItems: function(val) {
				console.log(val)
				this.$emit('items', val)

			},
		}
	}
</script>
<style>
	html,
	body,
	.el-container {
		/*设置内部填充为0，几个布局元素之间没有间距*/
		padding: 0px;
		/*外部间距也是如此设置*/
		margin: 0px;
		/*统一设置高度为100%*/
		height: 100%;
	}


	.bottom-fold {
		background-color: #FFFFFF !important;
	}
	
	.bottom-fold:hover {
		background-color: #ecf5ff !important;
	}

	.el-menu-item.is-active {
		background-color: #ecf5ff;
		color: #238bff;
	}



	..el-menu--collapse {
		/* height: 100%; */
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 200px;
		min-height: 100%;
		height: 100%;
		user-select: none;
	}

	.menu_top {
		height: 90%;
		display: flex;
		position: relative;
		overflow: overlay;
	}

	.menu_bottom {
		height: 10%;
	}

	.leftSide {
		display: block;
		overflow-y: scroll;
		min-width: fit-content;
		text-align: left;
		height: 100%;
		background-color: #ffffff;
	}

	.leftSide::-webkit-scrollbar {
		width: 0;
	}



	/* .is-active{
	  background-color: #509cff;
  }*/
</style>
